<template>
  <div class="main">

    <div>
      <router-view></router-view>
    </div>

    <van-tabbar v-model="activeIndex"
                iconactive-color="#646566"
                active-color="#0C34BA"
                route>

      <van-tabbar-item v-for="(item,index) in tabbarData"
                       :key="index"
                       :to="{name:item.routeName}">
        <span>{{item.title}}</span>

        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>

export default {
  name: 'Main',

  data () {
    return {
      activeIndex: 0,
      tabbarData: [
        {
          title: '首页',
          routeName: 'Shoye',
          activeIcon: require('../assets/home_active.png'),
          inactiveIcon: require('../assets/home.png'),
        },
        {
          title: '菜单',
          routeName: 'Themenu',
          activeIcon: require('../assets/Themenu_active.png'),
          inactiveIcon: require('../assets/Themenu.png'),
        },
        {
          title: '购物袋',
          routeName: 'ShoppingBags',
          activeIcon: require('../assets/ShoppingBags_active.png'),
          inactiveIcon: require('../assets/ShoppingBags.png'),
        },
        {
          title: '我的',
          routeName: 'My',
          activeIcon: require('../assets/My_active.png'),
          inactiveIcon: require('../assets/My.png'),
        },
      ]
    };
  },
}
</script>
<style lang="scss" scoped>
</style>
